<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList"
			field="express_company,id_order,shipping_sn,state,info">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data"> 
				<view class="wrap">
					<view class="base">
						<view class="title">{{data[0].express_company}}</view>
						<view class="item"> 快递单号：{{data[0].shipping_sn}}</view>
						<view class="item"> 收货地址：{{order.consignee_address}}</view>
					</view>
					  
					<!-- 地图放大：ctrl + 上滚      缩小：双击 -->
					<view>
							<view class="page-body">
								<view class="page-section page-section-gap">
									<map style="width: 100%; height: 330px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polylines">
									</map>
								</view>
							</view>
						</view> 
					
					<view class="list">
								<u-time-line v-for="(item, index) in data[0].info" :key="index">
									<u-time-line-item>
										<template v-slot:content>
											<view class="u-order-title" v-if="data[0].state==0 && index==0">已签收</view>
											<view class="u-order-desc">
												{{ item.AcceptStation }}
											</view>
											<view class="u-order-time">
												{{ item.AcceptTime }}
											</view>
										</template>
									</u-time-line-item>
								</u-time-line>
							</view>
				</view>
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const dbCmd = db.command
	const dbOrder = db.collection("t_shop_order")
	export default {
		data() {
			return {
				collectionList: "t_shop_express_info",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				order: {
					orderSn: '',
					address: {
						name: ''
					}
				},
				expressInfo: {},
				markerPoint: {
					lng: 112.9989,
					lat: 28.145885
				},
				zoom: 16,
				show: false,
				// id: 0, 
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				scale: 6,
				latitude: 31.2798,
				longitude: 121.580555,
				//标记点数组
				covers: [{
					latitude: 28.140401,
					longitude: 112.994162,
					iconPath: '../../../../static/img/ksh35.png'
				}, {
					latitude: 29.140401,
					longitude: 112.994162,
					iconPath: '../../static/img/ksh35.png'
				}],
				markers: [], //标记点数组
				polylines: [] //连续数组
			}
		},
		onLoad(option) {
			this.order.orderSn = option.orderSn;
			this.init();
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		onReady: function(res) {
			this.mapContext = uni.createMapContext('my-map', this);
			//调用的函数放到onReady里面
			// this.getlocal();
			this.test();
		},
		methods: {
			init() {
				dbOrder.where({order_sn: dbCmd.eq(this.order.orderSn)}).get().then(res => {
					let order = res.result.data[0]
					this.order = order
				})
			},
			// 地图
			//地图标记点;   具体的属性可以看看官网的说明
			test() {
				var that = this;
				//地图标记点连线静态数据赋值;
				// 可以理解成下面polylines里面的一个对象为一条线，每一条线都是独立的，可以设置不同的连续颜色
				//points[]里面是从第一个对象连到最后一个对象的经纬度成一条线
				that.polylines = [{
					points: [{
							latitude: 23.45105,
							longitude: 116.055,
						},
						{
							latitude: 23.248880,
							longitude: 113.350632
						},
						{
							latitude: 23.408727,
							longitude: 113.302481
						},
						{
							latitude: 28.72325,
							longitude: 116.055
						},
						{
							latitude: 30.274254,
							longitude: 120.569356
						},
						{
							latitude: 30.984444,
							longitude: 121.682264
						},
						{
							latitude: 31.2798,
							longitude: 121.580555
						},

					],
					arrowLine: true,
					dottedLine: true,
					// arrowIconPath: "../../../../../static/img/ksh35.png",
					width: 7,
					color: "#66c18c"
				}];
				//地图标记点静态数据赋值;
				//标记点和连线的意思差不多，标记点的数组是单纯将markers数组中的对象的经纬度通过图片的方式标记出来（图片可以自定义）
				that.markers = [{
						title: '123',
						latitude: 23.45105,
						longitude: 116.055,
						iconPath: '../../static/img/ksh35.png',
						// width:100,
						// height:100
					},
					{
						title: '123',
						latitude: 23.248880,
						longitude: 113.350632,
						iconPath: '../../static/img/ksh35.png'
					},
					{
						title: '123',
						latitude: 23.408727,
						longitude: 113.302481,
						iconPath: '../../static/img/ksh35.png'
					},
					{
						title: '123',
						latitude: 28.72325,
						longitude: 116.055,
						iconPath: '../../static/img/ksh35.png'
					},
					{
						title: '123',
						latitude: 30.274254,
						longitude: 120.569356,
						iconPath: '../../static/img/ksh35.png'
					},
					{
						title: '123',
						latitude: 30.984444,
						longitude: 121.682264,
						iconPath: '../../static/img/ksh35.png'
					},
					{
						title: '123',
						latitude: 31.2798,
						longitude: 121.580555,
						// iconPath: '../../static/img/ksh35.png'
					},
				];
			},
			//定位方法;获取当前的经纬度，也可以通过经纬度来获取当前的地理位置，比如：xx省、xx市、xx镇
			// getlocal: function() {
			// 	let _this = this;
			// 	//显示当前位置
			// 	var map = uni.createMapContext('maps', this).$getAppMap();
			// 	map.showUserLocation(true);
			// 	//获取当前定位
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 			console.log('当前位置的经度：' + res.longitude);
			// 			console.log('当前位置的纬度：' + res.latitude);
			// 			_this.longitude = res.longitude;
			// 			_this.latitude = res.latitude;
			// 		}
			// 	})
			// },
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 地图容器必须设置宽和高属性 */
	.map {
		width: 100%;
		height: 420px;
	}

	.amap-wrapper {
		width: 500px;
		height: 500px;
	}

	.amap-demo {
		height: 300px;
	}

	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	.base {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 30rpx;

		.title {
			color: #F59A23;
			font-size: 30rpx;
		}

		.item {
			padding-top: 10rpx;
		}
	}

	.list {
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
